<template>
  <el-button-group>
    <el-tooltip effect="dark" :content="handleFlag ? $t('common.fold') : $t('common.open')" placement="top">
      <el-button  @click="changeHandleFlag" :icon="handleFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></el-button>
    </el-tooltip>
    <el-tooltip effect="dark" :content="$t('common.refresh')" placement="bottom">
      <el-button @click="resetClick" icon="el-icon-refresh"></el-button>
    </el-tooltip>
    <el-dropdown class="margin-left1" :hide-on-click="false" trigger="click">
      <el-button><i class="el-icon-more"></i></el-button>
      <el-dropdown-menu slot="dropdown">
        <template v-for="(column, index) in columns">
          <el-dropdown-item  :key="index">
            <el-checkbox v-model="columnsStatus[column.prop]" @change="changeFlag">{{column.label}}</el-checkbox>
          </el-dropdown-item>
        </template>
      </el-dropdown-menu>
    </el-dropdown>
  </el-button-group>
</template>

<script>
  export default {
    components: {
    },
    props: {
      handleFlag: {
        required: true,
        type: Boolean,
        default: function () {
          return true
        }
      },
      columns: {
        type: Array,
        default: function () {
          return []
        }
      },
      columnsStatus: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    data () {
      return {
      }
    },
    mounted () {
    },
    computed: {
    },
    methods: {
      changeHandleFlag () {
        this.$emit('update:handleFlag', !this.handleFlag)
      },
      resetClick () {
        this.$emit('resetClick')
      },
      changeFlag () {
        this.$emit('update:columnsStatus', this.columnsStatus)
      }
    }
  }
</script>

<style scoped>
  .margin-left1 {
    margin-left: 1px;
  }
</style>
